// 定义一个空数组，用于接受离线存储
let searchArr = []
_getE("#search").onfocus = function () {
    _getE("#search").onkeyup = function (e) {
        // 当输入框有文字变化的时候判断两个点
        // 没有内容
        if (_getE("#search").value == "") {
            // 回到默认页面
            _getE(".search_default").style.display = "block"
            _getE(".search_result").style.display = "none"
            _getE(".search_adv").style.display = "none"
            changeHeight(document.querySelector(".viewport").children[2])
        }
        // 有内容
        else {
            // 如果有内容，还需要判断有没有点击回车按钮，输入回车就要跳转到结果页面
            // 可以借助e判断输入的内容,如果不是回车就停留在建议的页面
            // 如果是回车就跳转到搜索结果的页面
            // inputEvent检测的是有内容输入的 1 2 a b (alt shift enter)就没有
            // keybordEvent 键盘事件，检测盘上的任意事件，任何按钮

            // 如果是回车跳转到搜索结果
            if (e.keyCode == 13) {
                _getE(".search_default").style.display = "none"
                _getE(".search_result").style.display = "block"
                _getE(".search_adv").style.display = "none"
                // _getE("#search").value
                // searchArr.push(_getE("#search").value)
                if (!searchArr.includes(_getE("#search").value)) {
                    searchArr.push(_getE("#search").value)
                    add_localStorage()
                }
                // add_localStorage()
                // 获取搜索结果
                search_result()
            }
            else {
                _getE(".search_default").style.display = "none"
                _getE(".search_result").style.display = "none"
                _getE(".search_adv").style.display = "block"
                search_adv()
                changeHeight(document.querySelector(".viewport").children[2])
            }

        }
    }

}
// 渲染热门歌曲
searchHot()
function searchHot() {
    axios.get("http://localhost:3000/search/hot").then(function (data) {
        // console.log(data.data.result.hots);
        let hot_search_data = data.data.result.hots
        let str = ``
        for (let i = 0; i < hot_search_data.length; i++) {
            str += `<span>${hot_search_data[i].first}</span>`
        }
        _getE(".hot_search").innerHTML = str;
    })
}

// localStorage
// 离线存储的初始化,规定以search_info存储搜索的记录
init_localStorage()
function init_localStorage() {

    searchArr = JSON.parse(localStorage.getItem("search_info")) || []

}
list_localStorage()
// 渲染离线存储
function list_localStorage() {
    let str = ``
    for (let i = 0; i < searchArr.length; i++) {
        str +=
            `
        <li>
            <span>${searchArr[i]}</span>
            <span onclick="remove_localStorage(${i})">x</span>
        </li>
        `
    }
    _getE(".search_history > ul").innerHTML = str
}
// 添加离线存储
function add_localStorage() {
    // 判断离线存储是否已经有相关记录了，没有才添加
    // _getE("#search").value搜索框关键字
    // searchArr 离线搜索记录数组
    // 检查数组是否包含该关键字

    localStorage.setItem("search_info", JSON.stringify(searchArr))
    list_localStorage()
    // localStorage.setItem("search_info", JSON.stringify(searchArr))
    // list_localStorage()
}
// 删除离线缓存
function remove_localStorage(x) {
    searchArr.splice(x, 1)
    add_localStorage()

}
// 搜索建议方法
function search_adv() {
    axios.get(`http://localhost:3000/search/suggest?keywords=${_getE("#search").value}&type=mobile`)
        .then(function (data) {
            console.log("搜索建议数据", data.data);
            let search_adv_arr = data.data.result.allMatch
            let str = ``
            for (let i = 0; i < search_adv_arr.length; i++) {
                str +=
                    `
                <li>
                    <a href="" class="search_adv_list">
                        <span>${search_adv_arr[i].keyword}</span>
                        <span class="fa fa-search"></span>
                    </a>
                </li>
                `
            }
            _getE(".search_adv>ul").innerHTML = str
        })
}
// 搜索结果
function search_result() {
    function get_result() {
        return axios.get(`http://localhost:3000/search?keywords=${_getE("#search").value}`)
    }
    // 获取搜索的歌手和专辑信息
    function get_singer_info() {
        return axios.get(`http://localhost:3000/search/multimatch?keywords=${_getE("#search").value}`)
    }
    axios.all([get_result(), get_singer_info()])
        .then(axios.spread(function (result_data, match_data) {
            console.log("搜索单曲结果", result_data.data.result.songs);
            console.log("匹配歌手信息专辑选项", match_data.data.result);
            let songs_Data = result_data.data.result.songs
            let match_info_album = match_data.data.result.album
            let match_info_artist = match_data.data.result.artist
            // 重置一下两个li节点的显示
            _getE(".match_info>li:last-child").style.display = "none"
            _getE(".match_info>li:first-child").style.display = "none"

            // 渲染搜索歌曲的结果
            let songs_Data_Str = ``
            songs_Data.forEach(value => {
                songs_Data_Str +=
                    `
                <li>
                <a href="html/play.html?id=${value.id}">
                    <p class="song_name">${value.name}</p>
                    <p class="song_info">
                        <span>${value.artists[0].name}</span>
                        <span>${value.album.name}</span>
                    </p>
                    <div class="play_btn"></div>
                </a>
            </li>
                `
            })
            // 渲染到页面中
            _getE(".search_song").innerHTML = songs_Data_Str
            // 渲染歌手信息

            // match_info_artist.name歌手名字
            // match_info_artist.img1v1Url 歌手图片
            if (match_info_artist) {
                _getE(".match_info>li:first-child").innerHTML =
                    `
                    <a href="">
                        <img src="${match_info_artist[0].img1v1Url}" alt="">
                        <p>${match_info_artist[0].name}</p>
                    </a>
                `
                _getE(".match_info>li:first-child").style.display = "block"
            }
            // 渲染专辑信息
            if (match_info_album) {
                _getE(".match_info>li:last-child").innerHTML =
                    `
                <a href="">
                    <img src="${match_info_album[0].blurPicUrl}" alt="">
                    <p>${match_info_album[0].name}</p>
                </a>
            `
                _getE(".match_info>li:last-child").style.display = "block"
            }

        }))
    changeHeight(document.querySelector(".viewport").children[2])

}